<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=tree-polyline
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>
  {% include 'admin/common/footer.html' %}


  <script type="text/javascript">

      layui.use(['layer', 'echarts', 'element', 'count'], function () {
          var dom = document.getElementById('container');
          var myChart = echarts.init(dom, null, {
              renderer: 'canvas',
              useDirtyRect: false
          });
          var app = {};

          var option;

          const data = {
              name: '叠加性压力',
              children: [
                  {
                      name: '压力现状',
                      children: [
                              {name: '压力周期', value: 8833},
                              {name: '破坏程度', value: 1732},
                              {name: '影响范围', value: 1732},
                      ]
                  },
                  {
                      name: '压力表现',
                      children: [
                              {name: '生理', value: 8833},
                              {name: '认知', value: 1732},
                              {name: '行为', value: 1732},
                      ]
                  },
                  {
                      name: '职业压力',
                      children: [
                          {name: '工作强度', value: 8833},
                          {name: '工作环境', value: 1732},
                          {name: '成就感', value: 1732},
                          {name: '前景', value: 8833},
                          {name: '本领恐慌', value: 1732},
                      ]
                  },
                  {
                      name: '社会压力',
                      children: [
                          {name: '社会地位', value: 8833},
                          {name: '社会监督', value: 1732},
                      ]
                  },
                  {
                      name: '生活压力',
                      children: [
                          {name: '情感', value: 8833},
                          {name: '经济', value: 1732},
                      ]
                  },
              ]
          };
          option = {
              tooltip: {
                  trigger: 'item',
                  triggerOn: 'mousemove'
              },
              series: [
                  {
                      type: 'tree',
                      id: 0,
                      name: 'tree1',
                      data: [data],
                      top: '10%',
                      left: '8%',
                      bottom: '22%',
                      right: '20%',
                      symbolSize: 7,
                      edgeShape: 'polyline',
                      edgeForkPosition: '63%',
                      initialTreeDepth: 3,
                      lineStyle: {
                          width: 2
                      },
                      label: {
                          backgroundColor: '#fff',
                          position: 'left',
                          verticalAlign: 'middle',
                          align: 'right'
                      },
                      leaves: {
                          label: {
                              position: 'right',
                              verticalAlign: 'middle',
                              align: 'left'
                          }
                      },
                      emphasis: {
                          focus: 'descendant'
                      },
                      expandAndCollapse: true,
                      animationDuration: 550,
                      animationDurationUpdate: 750
                  }
              ]
          };

          if (option && typeof option === 'object') {
              myChart.setOption(option);
          }

          window.addEventListener('resize', myChart.resize);
      })
  </script>
</body>
</html>
